<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/res/style.css">

    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4736033_ux3qpx9j9w.css">
<title>DataGear 看板模板</title>
<!-- 模板样例CSS，导入后可删除 -->
<style type="text/css">

body::after{
	{#content: "DataGear（http://datagear.tech）";#}
	position: absolute;
	left: 0.1rem;
	top: 0.1rem;
}
.layout-center .panel{
	border: 1px dashed #2684ff;
}
.chart::after{
	content: "图表";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1rem;
	margin-left: -1rem;
	opacity: 0.8;
}
.btn-primary{
    position: absolute;
    right: 2%;
    top: 39%;
    color: #fff;
    background-color: #2975d7;
    border-color: #405fba;
    height: 30px;
    width: 60px;
    border-radius: 10px;
}
</style>
</head>
<body class="fill-parent"
	dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
	dg-chart-auto-resize="true"
	dg-chart-theme="{color:'#2684ff',backgroundColor:'transparent',actualBackgroundColor:'#142233'}">
<div class="head">
	<div class="title">电影数据可视化分析大屏 </div>
                <a href="/myApp/chartOne/" style="text-decoration: none;color: #fff"><button type="button" class="btn btn-primary">系统</button></a>


</div>
<div class="content">
	<div class="layout layout-left-top">
		<div class="panel panel-bg no-title-bg">
			<div class="title"></div>

             <div id="mainA" style="width: 100%;height: 80%"></div>
		</div>
	</div>
	<div class="layout layout-left-center">
		<div class="panel">
			<div class="title">TOP10电影列表</div>
			<div id="mainX" style="width: 100%;height: 450PX">
                <div class="row_list">
                    <ul class="cases_list" style="height: 450px;overflow: auto;max-resolution:21px 0 0 10px;padding: 0">
                        <li style="font-size: 15px;margin-top: 9px">
                            <div>图片</div>
                            <div>片名</div>
                            <div>类型</div>
                            <div>票房</div>
                            <div>上映时间</div>
                        </li>
                        {% for i in boxTopMovieList %}
                            <li style="margin-top: 7px">
                                <img src="{{ i.1 }}" alt="" style="height: 50px;width: 60px">
                            <div style="height: 50px;overflow: hidden;line-height: 39px">{{ i.0 }}</div>
                              <div style="height: 50px;overflow: hidden;line-height: 39px">{{ i.2 }}</div>
                              <div style="height: 50px;overflow: hidden;line-height: 39px">{{ i.11 }}万</div>
                              <div style="height: 50px;overflow: hidden;line-height: 39px">{{ i.5 }}</div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
		</div>
	</div>

	<div class="layout layout-center">
		<div class="layout layout-center-main">
			<div class="layout layout-center-top">
				<div class="  no-title-bg" style="display: flex;width: 100%;height: 100%">

                    <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">


                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-dianyingpiaoiocn iconfont" style="font-size: 30px"></i>最高票房</span>
                        <p style="color:#6685c3;"></p>
                    <p style="color:#6685c3;">{{ maxBox | safe }}</p>
                    </div>
                        <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">
                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-cash iconfont" style="font-size: 30px"></i>最高票房电影</span>
                            <p style="color:#6685c3;">{{ maxBoxMovie | safe }}</p>
                        </div>
                        <div style="flex: 1;border: 1px solid #2975d7;margin: 20px 10px 20px 0; text-align: center;">
                          <span style="color:#405fba;font-size: 20px;display: block;margin-top: 39px"> <i class="icon-leixing iconfont" style="font-size: 30px"></i>最多类型</span>
                        <p style="color:#6685c3;">{{ maxType | safe }}</p>
                        </div>
				</div>
			</div>
			<div class="layout layout-center-bottom">
				<div class="panel no-title-bg">
					<div class="title">TOP10电影票房评分统计</div>

                     <div id="mainB" style="width: 100%;height: 100%"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="layout layout-right-top">
		<div class="panel">
			<div class="title">类型首周票房/总票房分析 (万)</div>
			 <div id="mainC" style="width: 100%;height: 100%"></div>
		</div>
	</div>
	<div class="layout layout-right-center">
		<div class="panel">
			<div class="title">国家/地区 电影发行分析</div>
		 <div id="mainD" style="width: 100%;height: 105%"></div>
		</div>
	</div>
	<div class="layout layout-right-bottom">
		<div class="panel">
			<div class="title">电影星级占比分析</div>
			 <div id="mainE" style="width: 100%;height: 100%"></div>
		</div>
	</div>
</div>


<style>
    .row_list {
        list-style: none;
    }

    .cases_list::-webkit-scrollbar {
        display: none;
    }

    .cases_list li {
        display: grid;
        -ms-grid-columns: 15% 20% 20% 20% 25%;
        grid-template-columns: 15% 20% 20% 20% 25%;
        cursor: pointer;
        {#margin-left: 3px;#}
        font-size: 13px;
        text-align: center;
        line-height: 30px;
        color: rgb(238, 236, 236);
    }
</style>

</body>
<script src="/static/static/echarts.js"></script>
<script>
    var chartDom = document.getElementById('mainA');
var myChart = echarts.init(chartDom);
var option;

var scale = 1;
var echartData = {{ typeChartData | safe }}
var rich = {
    yellow: {
        color: "#ffc72b",
        fontSize: 30 * scale,
        {#padding: [5, 4],#}
         padding: [0, 12]
        {#align: 'center',#}
    },
    total: {
        color: "#ffc72b",
        fontSize: 21 * scale,
        align: 'center'
    },
    white: {
        color: "#fff",
        align: 'center',
        fontSize: 14 * scale,
        {#padding: [21, 0]#}
    },
    blue: {
        color: '#49dff0',
        fontSize: 16 * scale,
        align: 'center'
    },
    hr: {
        borderColor: '#0b5263',
        width: '100%',
        borderWidth: 1,
        height: 0,
    }
}
option = {
    {#backgroundColor: '#031f2d',#}
    title: {
        text:'类型统计分析',
        left:'center',
        top:'45%',
        padding:[24,0],
        textStyle:{
            color:'#fff',
            fontSize:15*scale,
            align:'center'
        }
    },
    legend: {
        selectedMode:false,
        formatter: function(name) {
            var total = 0; //各科正确率总和
            var averagePercent; //综合正确率
            echartData.forEach(function(value, index, array) {
                total += value.value;
            });
            return '{total|' + total + '}';
        },
        data: [echartData[0].name],
        // data: ['高等教育学'],
        // itemGap: 50,
        left: 'center',
        top: 'center',
        icon: 'none',
        align:'center',
        textStyle: {
            color: "#fff",
            fontSize: 16 * scale,
            rich: rich
        },
    },
    series: [{
        name: '总考生数量',
        type: 'pie',
        radius: ['42%', '50%'],
        center:["50%","60%"],
        hoverAnimation: false,
        color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4',],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    var total = 0; //考生总数量
                    var percent = 0; //考生占比
                    echartData.forEach(function(value, index, array) {
                        total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                },
                rich: rich
            },
        },
        labelLine: {
            normal: {
                length: 45 * scale,
                length2: 0,
                lineStyle: {
                    color: '#0b5263'
                }
            }
        },
        data: echartData
    }]
};

option && myChart.setOption(option);

</script>

<script>
                var chartDom = document.getElementById('mainE');
var myChart = echarts.init(chartDom);
var option;

option = {
    {#backgroundColor:'#fff',#}
        color:['#2da9ff','#7cc5ff','#bfe3ff','#1e53d8','#243be9','#1d18f0'],
    series: [
        {
            zlevel:1,
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '70%',
            height: '70%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 120,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 2,
            label: {
                show: true,
                position: 'right',
                width:'200px',
                align:'right',
                formatter:function(params){
                    return params.data.name +':'+ params.data.reaVal+'%';
                }
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: {{ starData | safe }}
        },
        // {
        //     name:'漏斗图',
        //     type:'funnel',
        //     left: '10%',
        //     top: 60,
        //     //x2: 80,
        //     bottom: 60,
        //     width: '80%',
        //     // height: {totalHeight} - y - y2,
        //     min: 0,
        //     max: 120,
        //     minSize: '0%',
        //     maxSize: '100%',
        //     sort: 'ascending',
        //     gap: 2,
        //     label: {
        //         show: true,
        //         position: 'right',
        //         width:'200px',
        //         // show:false
        //     },
        //     labelLine: {
        //         show:false,
        //         length: 10,
        //         lineStyle: {
        //             width: 1,
        //             type: 'solid'
        //         }
        //     },
        //     itemStyle: {
        //         color:'transparent'
        //     },
        //     emphasis: {
        //         label: {
        //             fontSize: 20
        //         }
        //     },
        //     data: [
        //         {value: 120, name: '达安基因'},
        //         {value: 120, name: '上海之江'},
        //         {value: 120, name: '硕士'},
        //         {value: 120, name: '其它'},
        //         {value: 120, name: '思路迪'},
        //         {value: 120, name: '迈克'}
        //     ]
        // }
    ]
};


option && myChart.setOption(option);
</script>
<script>
                var chartDom = document.getElementById('mainD');
var myChart = echarts.init(chartDom);
var option;

// 置入DOM方式
// var myChart = echarts.init(document.getElementById('chart1'));
// myChart.setOption(option1);
// 浏览器窗口大小变化后，图标自适应缩放
// window.onresize=function(){myChart.resize()};


option = {
    grid:{
        top:60,
        left:80,
        bottom:60,
        right:60
    },
    yAxis: {
        type: 'category',
        axisTick:{
            show:false
        },
        axisLine:{
            show:false
        },
        axisLabel:{
            color:'#6ca6dc',
            fontSize:14,
            margin:21,
            fontWeight:'bold'
        },
        data:{{ countryX | safe }}
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        }
    },

   xAxis : {
        name:'单位：个',
        nameTextStyle:{
            color:'#6ca6dc',
            fontSize:12,
            padding:[0, 0, 0, -5]
        },
        max: function(value) {
            if(value.max<5){
                return 5
            }else{
                return value.max
            }
        },
        type: 'value',
        axisLine:{
            show:false
        },
        axisLabel:{
            color:'#6ca6dc',
            fontSize:12,
            margin:5
        },
        splitLine:{
            lineStyle:{
                color:'#F2F2F2',
                opacity:1,
                width:1
            }
        },
        axisTick:{
            show:false
        }
    },
    series: [{
        label:{
            show:true,
            position:'right',
            fontSize:14,
            color:'#3D8BF0',
            fontWeight:'bold'
        },
        barMaxWidth:60,
        itemStyle:{
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#3D8BF0' // 0% 处的颜色
                }, {
                    offset: 1, color: '#CCE2FF' // 100% 处的颜色
                }]
            }
        },
        data: {{ countryY }},
        type: 'bar'
    }]
};

option && myChart.setOption(option);
</script>
<script>
            var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;

option = {
    // backgroundColor: '#080b30',
    title: {
        // text: '哎呦,不错哦',
        textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 20,
        },
        top: '5%',
        left: 'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },
    },
    grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        axisLine: {
            show: true
        },
        splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: {{ boxLineX | safe }},

    }],

    yAxis: [{
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
                color: '#d1e6eb',

            },
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
            name: '注册总量',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    color: "#6c50f3",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#6c50f3',
                }
            },
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(108,80,243,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(108,80,243,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(108,80,243, 0.9)',
                    shadowBlur: 20
                }
            },
            data: {{ boxLineY1 }}
        },
        {
            name: '注册总量',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    color: "#2672d4",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#2672d4',
                }
            },

            itemStyle: {
                color: "#2672d4",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,202,149,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,202,149,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(0,202,149, 0.9)',
                    shadowBlur: 20
                }
            },
            data: {{ boxLineY2 }},
        },
    ]
};
option && myChart.setOption(option);
</script>
<script>
        var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;

option = {
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
    dataZoom:[
        {
            type:'inside',
            start:0,
            end:90
        }
    ],
    legend: {
          data:['评分','票房(附)','票房'],
        textStyle:{
              color:'white'
        },
        left:'70%'
    },
    // backgroundColor: '#081C39',
    grid: {
        top: '15%',
        left: '10%',
        right: '7%',
        bottom: '5%',
        show: false,
    },
    xAxis: {
        type: 'category',
        data: {{ topX | safe }},
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
    yAxis:[
         {
             name:'单位/万',
        type: 'value',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#4C77A3',
            },
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
         {
        type: 'value',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#4C77A3',
            },
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
    ],
    series: [
        {
            name:'评分',
            yAxisIndex:1,
            data: {{ topY2 }},
            type: 'line',
            itemStyle: {
                color: '#00F8FF',
                opacity: 0,
            },
            lineStyle: {

            }
        },
        {
            name:'票房(附)',
            type: 'pictorialBar',
            symbolSize: [40, 20],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#00E3FE',
                        },
                        {
                            offset: 0,
                            color: '#0176CD',
                        },
                    ]),
                },
            },
            symbolPosition: 'end',
            data: {{ topY1 }},
        },
        {
            name:'票房',
            data: {{ topY1 }},
            type: 'bar',
            barWidth: '40',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 1,
                        color: '#00E3FE',
                    },
                    {
                        offset: 0,
                        color: '#0176CD',
                    },
                ]),
            },
        },
    ],
};

option && myChart.setOption(option);

function changeData(x){
    var st = x[0]
    for (var i=0;i<x.length;i++){
        x[i] = x[i + 1]
    }
    x[x.length - 1] = st
        }
        topxData = {{ topX | safe }}
        topy1Data = {{ topY1 | safe }}
        topy2Data = {{ topY2 | safe }}
function circleOne(){
    this.changeData(topxData)
        this.changeData(topy1Data)
            this.changeData(topy2Data)

        var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;

option = {
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
    legend: {
          data:['评分','票房(附)','票房'],
        textStyle:{
              color:'white'
        },
        left:'70%'
    },
    // backgroundColor: '#081C39',
    grid: {
        top: '15%',
        left: '10%',
        right: '7%',
        bottom: '5%',
        show: false,
    },
    xAxis: {
        type: 'category',
        data: topxData,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
    yAxis:[
         {
             name:'单位/万',
        type: 'value',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#4C77A3',
            },
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
         {
        type: 'value',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#4C77A3',
            },
        },
        axisLabel: {
            color: '#FFFFFF',
        },
    },
    ],
    series: [
        {
            name:'评分',
            yAxisIndex:1,
            data: topy2Data,
            type: 'line',
            itemStyle: {
                color: '#00F8FF',
                opacity: 0,
            },
            lineStyle: {

            }
        },
        {
            name:'票房(附)',
            type: 'pictorialBar',
            symbolSize: [40, 20],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#00E3FE',
                        },
                        {
                            offset: 0,
                            color: '#0176CD',
                        },
                    ]),
                },
            },
            symbolPosition: 'end',
            data: topy1Data,
        },
        {
            name:'票房',
            data: topy1Data,
            type: 'bar',
            barWidth: '40',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 1,
                        color: '#00E3FE',
                    },
                    {
                        offset: 0,
                        color: '#0176CD',
                    },
                ]),
            },
        },
    ],
};

option && myChart.setOption(option);

}

setInterval(circleOne,2000)
</script>
</html>